<template>
  <div class="about">
    <p>MyCart</p>
    <el-table
      ref="multipleTable"
      :data="$store.state.list"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="change"
    >
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column label="商品样式" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.productImage" alt="" />
        </template>
      </el-table-column>
      <el-table-column prop="productName" label="商品名称" align="center">
      </el-table-column>
      <el-table-column prop="salePrice" label="价格" align="center">
      </el-table-column>
      <el-table-column label="数量" align="center">
        <template slot-scope="scope">
          <el-input-number
            v-model="scope.row.count"
            :min="1"
            :max="10"
            label="描述文字"
            size="mini"
            @change="count(scope.row)"
          ></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="小计" align="center">
        <template slot-scope="scope">
          ￥{{ scope.row.count * scope.row.salePrice }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="danger" size="small" @click="del(scope.row._id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-button @click="remove">选中删除</el-button>
      <!-- <span>全选：</span> -->
      <span>总价：{{ sum }}</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      removeIds: "",
    };
  },
  methods: {
    // 删除
    del(id) {
      this.$store.commit("del", id);
    },
    // 数量
    count(item) {
      this.$store.commit("counts", item);
    },
    // 保存选中数据的id
    change(val) {
      console.log(val);
      this.removeIds = val.map((item) => {
        return item._id;
      });
    },
    // 选中删除
    remove() {
      // console.log(this.removeIds);
      if (this.removeIds == "") {
        this.$message({
          type: "warning",
          message: "请选择",
        });
        return;
      }
      this.$store.commit("remove", this.removeIds);
    },
  },
  // 计算
  computed: {
    // 合计
    sum() {
      var counts = 0;
      this.$store.state.list.forEach((item) => {
        if (this.removeIds.indexOf(item._id) != -1) {
          counts += item.count * item.salePrice;
        }
      });
      return counts;
    },
  },
};
</script>
<style lang="scss" scoped>
.about {
  width: 1000px;
  margin: 0 auto;
  > p {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
  }
  .el-table {
    img {
      width: 40px;
      height: 40px;
    }
  }
  > div {
    width: 1000px;
    margin: 0 auto;
  }
}
</style>
